import { Card, Form, Input, Select, Switch } from "antd";
import { PdfNodeProps } from "../components";
import { useEffect, useMemo, useState } from "react";
import { getListPdfNodeType } from "../Sidebar/design";
import { MmInputNumber } from "./MmInputNumber";
export interface PropertiesPanelProps {
    node: PdfNodeProps,
    updateNode: (id: string, node: PdfNodeProps) => void
}
export const BasicPanel = (props: PropertiesPanelProps) => {
    const { node, updateNode } = props;
    const [form] = Form.useForm();
    const dndNodes = useMemo(() => {
        const list = getListPdfNodeType();
        return list.map(m => {
            return { value: m.name, label: m.displayName };
        })
    }, []);
    useEffect(() => {
        form.resetFields();
    }, [form, node?.id])

    useEffect(() => {
        form.setFieldsValue(node)
    }, [form, node])

    if (!node?.id) return <div ></div>;

    return <Form
        form={form}
        name="wrap"
        labelCol={{ flex: '65px' }}
        labelAlign="right"
        // labelWrap
        colon={false}
        onValuesChange={(changedValues, allValues) => {
            updateNode(node.id!, allValues);
        }}
    >
        <Form.Item label="标题" name={["data", "label"]} >
            <Input />
        </Form.Item>
        <Form.Item label="绑定字段" name={["data", "dataBinding"]} >
            <Input />
        </Form.Item>
        <Form.Item label="测试数据" name={["data", "value"]}>
            <Input />
        </Form.Item>
        <Form.Item label="Type" name={["type"]}>
            <Select options={dndNodes} />
        </Form.Item>
        <Form.Item label="X" name={["position", "x"]}>
            <MmInputNumber
                defaultValue={0}
            />
        </Form.Item>
        <Form.Item label="Y" name={["position", "y"]}>
            <MmInputNumber
                defaultValue={0}
            />
        </Form.Item>
        <Form.Item label="Width" name={["width"]}>
            <MmInputNumber
                defaultValue={0}
            />
        </Form.Item>
        <Form.Item label="Height" name={["height"]}>
            <MmInputNumber
                defaultValue={0}
            />
        </Form.Item>
        <Form.Item label="标题隐藏" name={["data", "hidden"]} >
            <Switch />
        </Form.Item>
    </Form>
};
const tabList = [
    {
        key: 'tab1',
        tab: '常规',
    },
    {
        key: 'tab2',
        tab: '样式',
    },
];


export const PropertiesPanel = (props: PropertiesPanelProps) => {
    const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
    const onTab1Change = (key: string) => {
        setActiveTabKey1(key);
    };
    const contentList: Record<string, React.ReactNode> = {
        tab1: <BasicPanel {...props} />,
        tab2: <p>content2</p>,
    };
    return <Card
        style={{ width: '100%' }}
        title="属性"
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={onTab1Change}
    >
        {contentList[activeTabKey1]}
    </Card>
}
